<template>
  <div
    class="dropdownbox"
    :class="{ clicked: show }"
    @click.stop="clicked"
    ref="container"
  >
    <span class="content">{{ selectItem.name }}</span>
    <i :show="show" class="mu-icon-down icon"></i>
    <ul
      :direction="direction"
      class="list position"
      :class="{ show }"
      ref="list"
    >
      <li
        :class="{ selected: selectItem.value === item.value }"
        v-for="(item, index) in items"
        :key="index"
        @click="select(item)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
@import "../variable.scss";

.clicked {
  border: $blue 1px solid !important;
}

.dropdownbox {
  position: relative;
  display: inline-block;
  border: $gray 1px solid;
  transition: 0.3s;
  padding: 5px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;

  .content {
    padding: 0px 20px;
  }

  &:hover {
    border: $blue 1px solid;
  }

  .list {
    background: #ffffff;
    min-width: 100%;
    margin: 0;
    list-style: none;
    position: absolute;
    padding: 5px 0;
    left: 0;
    transform: scaleY(0);
    border-radius: 3px;
    box-shadow: 0 0 10px $gray;
    opacity: 0;
    transition: transform 0.2s ease-in, opacity 0.2s ease-in;

    li {
      padding: 7px 20px;
      font-size: 15px;
      white-space: nowrap;
      text-overflow: ellipsis;

      &:hover {
        background: #f5f5f5;
      }
    }

    .selected {
      font-weight: 700;
      color: $blue;
    }
  }

  .list[direction="bottom"] {
    transform-origin: 0 0;
  }

  .list[direction="top"] {
    transform-origin: 0 100%;
  }

  .position[direction="top"] {
    bottom: 35px;

    &:before {
      box-sizing: content-box;
      width: 0px;
      height: 0px;
      position: absolute;
      bottom: -10px;
      left: 21px;
      padding: 0;
      border-bottom: 5px solid transparent;
      border-top: 5px solid #ffffff;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      display: block;
      content: "";
      z-index: 12;
    }

    &:after {
      box-sizing: content-box;
      width: 0px;
      height: 0px;
      position: absolute;
      bottom: -12px;
      left: 20px;
      padding: 0;
      border-bottom: 6px solid transparent;
      border-top: 6px solid $gray;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      display: block;
      content: "";
      z-index: 10;
    }
  }

  .position[direction="bottom"] {
    top: 33px;

    &:before {
      box-sizing: content-box;
      width: 0px;
      height: 0px;
      position: absolute;
      top: -10px;
      left: 21px;
      padding: 0;
      border-bottom: 5px solid #ffffff;
      border-top: 5px solid transparent;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      display: block;
      content: "";
      z-index: 12;
    }

    &:after {
      box-sizing: content-box;
      width: 0px;
      height: 0px;
      position: absolute;
      top: -12px;
      left: 20px;
      padding: 0;
      border-bottom: 6px solid $gray;
      border-top: 6px solid transparent;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      display: block;
      content: "";
      z-index: 10;
    }
  }

  .show {
    transform: scaleY(1);
    opacity: 1;
  }

  .icon {
    color: #cccccc;
    transition: transform 0.3s;
  }

  .icon[show] {
    transform: rotate(-180deg);
  }
}
</style>
<script>
import {
  addEventListener,
  removeEventListener,
  findOffsetTop,
} from "../utils/events";

export default {
  name: "mu-dropdown",
  data() {
    return {
      selectItem: {}, //选中的项
      show: false, //是否显示
      direction: "", //向上
    };
  },
  mounted() {
    const item =
      this.items.find((c) => c.value === this.selectedValue) || this.items[0];
    if (item) {
      this.selectItem = item;
    }
    this.setDirection();
    addEventListener(document, "click", this.hide);
  },
  beforeDestroy() {
    removeEventListener(document, "click", this.hide);
  },
  methods: {
    //隐藏方法
    hide(e) {
      this.show = false;
    },
    //点击显示或隐藏
    clicked() {
      this.setDirection();
      this.show = !this.show;
    },
    //选中方法
    select(item) {
      this.selectItem = item;
      this.$emit("selected", this.selectItem);
    },
    //设置方向
    setDirection() {
      const top =
        findOffsetTop(this.$refs.container.parentElement, 0) +
        this.$refs.container.offsetTop +
        this.$refs.container.offsetHeight +
        this.$refs.list.clientHeight +
        20 -
        document.documentElement.scrollTop;
      this.direction =
        top > document.documentElement.clientHeight ? "top" : "bottom";
    },
  },
  watch: {
    //选中值改变的时候
    selectedValue(value) {
      const item = this.items.find((c) => c.value === value);
      item && (this.selectItem = item);
    },
  },
  props: {
    // 列表项
    items: {
      required: true,
      type: Array,
      validator(value) {
        return (
          value.length &&
          value.every((item) => "name" in item && "value" in item)
        );
      },
    },
    //选中项
    selectedValue: {
      type: Number,
      default: 0,
    },
  },
};
</script>